<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="120px"
    class="car-form"
  >
    <!-- 基本信息 -->
    <el-form-item label="车辆品牌" prop="brand">
      <el-select v-model="formData.brand" placeholder="选择品牌" @change="handleBrandChange">
        <el-option
          v-for="brand in brandOptions"
          :key="brand.value"
          :label="brand.label"
          :value="brand.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="车辆型号" prop="model">
      <el-select v-model="formData.model" placeholder="选择型号" :disabled="!formData.brand">
        <el-option
          v-for="model in modelOptions"
          :key="model.value"
          :label="model.label"
          :value="model.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="车辆标题" prop="title">
      <el-input v-model="formData.title" placeholder="例如：2018款 大众朗逸 1.5L 自动舒适版" />
    </el-form-item>

    <el-form-item label="车辆描述" prop="description">
      <el-input
        v-model="formData.description"
        type="textarea"
        :rows="4"
        placeholder="详细描述车辆状况、配置、保养情况等"
        maxlength="500"
        show-word-limit
      />
    </el-form-item>

    <!-- 车辆信息 -->
    <el-form-item label="上牌时间" prop="reg_date">
      <el-date-picker
        v-model="formData.reg_date"
        type="month"
        placeholder="选择上牌时间"
        value-format="YYYY-MM"
      />
    </el-form-item>

    <el-form-item label="行驶里程" prop="distance">
      <el-input-number
        v-model="formData.distance"
        :min="0"
        :max="100"
        :precision="1"
        controls-position="right"
      />
      <span class="unit">万公里</span>
    </el-form-item>

    <el-form-item label="变速箱" prop="gearbox">
      <el-radio-group v-model="formData.gearbox">
        <el-radio label="manual">手动</el-radio>
        <el-radio label="auto">自动</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="排放标准" prop="emission">
      <el-select v-model="formData.emission" placeholder="选择排放标准">
        <el-option label="国四" value="国四" />
        <el-option label="国五" value="国五" />
        <el-option label="国六" value="国六" />
      </el-select>
    </el-form-item>

    <el-form-item label="排量" prop="displacement">
      <el-input-number
        v-model="formData.displacement"
        :min="0.8"
        :max="6.0"
        :step="0.1"
        :precision="1"
        controls-position="right"
      />
      <span class="unit">L</span>
    </el-form-item>

    <el-form-item label="车辆颜色" prop="color">
      <el-input v-model="formData.color" placeholder="请输入车辆颜色" />
    </el-form-item>

    <!-- 价格信息 -->
    <el-form-item label="期望售价" prop="price">
      <el-input-number
        v-model="formData.price"
        :min="1"
        :max="1000"
        :precision="2"
        controls-position="right"
      />
      <span class="unit">万元</span>
    </el-form-item>

    <el-form-item label="新车价格" prop="original_price">
      <el-input-number
        v-model="formData.original_price"
        :min="1"
        :max="1000"
        :precision="2"
        controls-position="right"
      />
      <span class="unit">万元</span>
    </el-form-item>

    <!-- 车辆图片 -->
    <el-form-item label="车辆图片" prop="images">
      <ImageUpload
        v-model="formData.images"
        :limit="10"
        :multiple="true"
      />
    </el-form-item>

    <!-- 联系方式 -->
    <el-form-item label="联系人" prop="contact_name">
      <el-input v-model="formData.contact_name" placeholder="请输入联系人姓名" />
    </el-form-item>

    <el-form-item label="联系电话" prop="contact_phone">
      <el-input v-model="formData.contact_phone" placeholder="请输入联系电话" />
    </el-form-item>

    <el-form-item label="所在城市" prop="location">
      <el-input v-model="formData.location" placeholder="例如：北京朝阳区" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

const formRef = ref()

const formData = reactive({
  brand: '',
  model: '',
  title: '',
  description: '',
  reg_date: '',
  distance: 0,
  gearbox: '',
  emission: '',
  displacement: 0,
  color: '',
  price: 0,
  original_price: 0,
  images: [],
  contact_name: '',
  contact_phone: '',
  location: ''
})

const brandOptions = [
  { label: '大众', value: 'volkswagen' },
  { label: '丰田', value: 'toyota' },
  { label: '本田', value: 'honda' },
  { label: '奔驰', value: 'benz' },
  { label: '宝马', value: 'bmw' },
  { label: '奥迪', value: 'audi' }
]

const modelOptions = computed(() => {
  const models = {
    volkswagen: [
      { label: '朗逸', value: 'lavida' },
      { label: '帕萨特', value: 'passat' },
      { label: '途观', value: 'tiguan' }
    ],
    toyota: [
      { label: '卡罗拉', value: 'corolla' },
      { label: '凯美瑞', value: 'camry' },
      { label: 'RAV4', value: 'rav4' }
    ],
    honda: [
      { label: '思域', value: 'civic' },
      { label: '雅阁', value: 'accord' },
      { label: 'CR-V', value: 'crv' }
    ]
  }
  return models[formData.brand] || []
})

const formRules = {
  brand: [
    { required: true, message: '请选择车辆品牌', trigger: 'change' }
  ],
  model: [
    { required: true, message: '请选择车辆型号', trigger: 'change' }
  ],
  title: [
    { required: true, message: '请输入车辆标题', trigger: 'blur' },
    { min: 5, max: 50, message: '标题长度在 5 到 50 个字符', trigger: 'blur' }
  ],
  reg_date: [
    { required: true, message: '请选择上牌时间', trigger: 'change' }
  ],
  distance: [
    { required: true, message: '请输入行驶里程', trigger: 'blur' }
  ],
  gearbox: [
    { required: true, message: '请选择变速箱类型', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入期望售价', trigger: 'blur' }
  ],
  contact_name: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' }
  ],
  contact_phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入所在城市', trigger: 'blur' }
  ]
}

const handleBrandChange = () => {
  formData.model = ''
}

// 监听props变化
watch(() => props.modelValue, (newVal) => {
  Object.assign(formData, newVal)
}, { immediate: true })

// 监听formData变化
watch(formData, (newVal) => {
  emit('update:modelValue', newVal)
}, { deep: true })

// 验证表单
const validate = () => {
  if (!formRef.value) return Promise.resolve(false)
  return formRef.value.validate()
}

// 重置表单
const resetFields = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

defineExpose({
  validate,
  resetFields
})
</script>

<style lang="scss" scoped>
.car-form {
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }

  .unit {
    margin-left: 8px;
    color: #666;
  }
}
</style>